<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col-md-6">
        <h5 class="card-title"><i class="fa fa-box me-2"></i>商品表</h5>
      </div>
      <div class="text-end col-md-6">
        <div class="text-lg-end pt-1">
          <!-- 批量删除按钮 -->
          <button class="btn btn-outline-danger me-2" type="button" (click)="deleteSelected()" [disabled]="selectedItems.length === 0">
            <i class="fa fa-trash me-1"></i>
            批量删除 <span *ngIf="selectedItems.length > 0">({{selectedItems.length}})</span>
          </button>
          
          <!-- 导出按钮区域 -->
          <button class="btn btn-outline-success me-2" type="button" 
                  (click)="exportSelectedItems()" 
                  [disabled]="selectedItems.length === 0">
            <i *ngIf="isExporting" class="fa fa-spinner fa-spin me-1"></i>
            <i *ngIf="!isExporting" class="fa fa-file-excel-o me-1"></i>
            导出选中项
            <span *ngIf="selectedItems.length > 0">({{selectedItems.length}})</span>
          </button>
          
          <button class="btn btn-outline-success me-2" type="button" 
                  (click)="exportCurrentPage()" 
                  [disabled]="shop.items.length === 0 || isExporting">
            <i *ngIf="isExporting" class="fa fa-spinner fa-spin me-1"></i>
            <i *ngIf="!isExporting" class="fa fa-file-excel-o me-1"></i>
            导出当前页
          </button>
          
          <button class="btn btn-outline-success me-2" type="button" 
                  (click)="exportAllData()" 
                  [disabled]="shop.totalCount === 0 || isExporting">
            <i *ngIf="isExporting" class="fa fa-spinner fa-spin me-1"></i>
            <i *ngIf="!isExporting" class="fa fa-file-excel-o me-1"></i>
            导出全部
          </button>
          
          <button id="create" class="btn btn-primary" type="button" (click)="openCreateModal(createEditModal)">
            <i class="fa fa-plus me-1"></i>
            <span>新建商品</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 添加搜索功能 -->
  <div class="card-body border-bottom search-section">
    <form (ngSubmit)="searchShop()">
      <div class="row">
        <div class="col-md-6 mb-3">
          <div class="input-group search-group">
            <span class="input-group-text bg-light border-end-0">
              <i class="fa fa-search text-muted"></i>
            </span>
            <input
              type="text"
              class="form-control border-start-0"
              placeholder="搜索商品名称、代码或SKU..."
              [(ngModel)]="productNameKeyword"
              name="productNameKeyword"
            />
            <button class="btn btn-primary" type="submit">
              搜索
            </button>
            <button class="btn btn-outline-secondary" type="button" (click)="resetSearch()">
              重置
            </button>
          </div>
        </div>
        
        <!-- 扩展: 高级搜索区域 -->
        <div class="col-12 mt-2" *ngIf="isSearchMode && !productNameKeyword">
          <div class="advanced-search">
            <div class="row">
              <div class="col-md-4 mb-3">
                <label class="form-label">商品代码</label>
                <input type="text" class="form-control" [(ngModel)]="searchFilter.productCode" name="productCode">
              </div>
              <div class="col-md-4 mb-3">
                <label class="form-label">商品名称</label>
                <input type="text" class="form-control" [(ngModel)]="searchFilter.productName" name="productName">
              </div>
              <div class="col-md-4 mb-3">
                <label class="form-label">货主代码</label>
                <input type="text" class="form-control" [(ngModel)]="searchFilter.ownerCode" name="ownerCode">
              </div>
              <div class="col-md-4 mb-3">
                <label class="form-label">商品分类</label>
                <select class="form-select" [(ngModel)]="searchFilter.category" name="category">
                  <option value="">全部</option>
                  <option *ngFor="let cat of categoryOptions" [value]="cat">{{cat}}</option>
                </select>
              </div>
              <div class="col-md-4 mb-3">
                <label class="form-label">商品类型</label>
                <input type="text" class="form-control" [(ngModel)]="searchFilter.productType" name="productType">
              </div>
              <div class="col-md-4 mb-3 d-flex align-items-end">
                <button type="button" class="btn btn-primary w-100" (click)="searchShop()">
                  <i class="fa fa-filter me-1"></i> 应用过滤
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  
  <!-- 加载指示器 -->
  
  <!-- 表格内容 -->
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-striped table-hover custom-table">
        <thead>
          <tr>
            <th width="40px">
              <div class="form-check">
                <input class="form-check-input" 
                       type="checkbox" 
                       [checked]="isAllSelected" 
                       (change)="selectAll($any($event.target).checked)"
                       #selectAllCheckbox>
              </div>
            </th>
            <th>序号</th>
            <th>商品名称</th>
            <th>SKU</th>
            <th>货主代码</th>
            <th>规格</th>
            <th>商品类型</th>
            <th>条码</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let shopItem of shop.items; let i = index">
            <td>
              <div class="form-check">
                <input class="form-check-input" 
                       type="checkbox" 
                       [checked]="selectedItems.includes(shopItem.id)" 
                       (change)="toggleItemSelection(shopItem.id)"
                       #rowCheckbox>
              </div>
            </td>
            <td>{{ (list.page - 1) * currentPageSize + i + 1 }}</td>
            <td>{{ shopItem.productName }}</td>
            <td>{{ shopItem.sku }}</td>
            <td>{{ shopItem.ownerCode }}</td>
            <td>{{ shopItem.specification }}</td>
            <td>{{ shopItem.productType }}</td>
            <td>{{ shopItem.barcode }}</td>
            <td class="action-buttons">
              <button class="btn btn-sm btn-outline-primary me-1" type="button" (click)="openEditModal(shopItem.id, createEditModal)">
                <i class="fa fa-edit"></i>
                <span class="d-none d-md-inline-block ms-1">编辑</span>
              </button>
              <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteShop(shopItem.id)">
                <i class="fa fa-trash"></i>
                <span class="d-none d-md-inline-block ms-1">删除</span>
              </button>
            </td>
          </tr>
          <tr *ngIf="shop.items.length === 0">
            <td colspan="9" class="text-center py-4">
              <i class="fa fa-info-circle me-2"></i>
              暂无商品数据
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  
  <!-- 分页控制 -->
  <div class="card-footer">
    <div class="row">
      <div class="col-md-6">
        <!-- 分页信息 -->
        <div class="pagination-info" *ngIf="shop.items.length > 0">
          当前显示 {{ shop.totalCount > 0 ? ((list.page - 1) * currentPageSize) + 1 : 0 }} - {{ Math.min(list.page * currentPageSize, shop.totalCount) }} 条，总计 {{ shop.totalCount }} 条
        </div>
      </div>
      <div class="col-md-6">
        <!-- 分页控制 -->
        <div class="d-flex justify-content-end align-items-center">
          <!-- 每页显示数量选择 -->
          <div class="me-3">
            <label class="me-2">每页显示：</label>
            <select class="form-select form-select-sm d-inline-block" style="width: auto;" 
                    [(ngModel)]="currentPageSize" 
                    (change)="onPageSizeChange(currentPageSize)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
          
          <!-- 分页导航 -->
          <nav aria-label="分页导航" *ngIf="shop.items.length > 0">
            <ul class="pagination pagination-sm mb-0">
              <!-- 首页 -->
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(1)">
                  <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
              </li>
              
              <!-- 上一页 -->
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              
              <!-- 页码按钮 -->
              <ng-container *ngFor="let page of visiblePageNumbers">
                <!-- 省略号 -->
                <li class="page-item disabled" *ngIf="page < 0">
                  <span class="page-link">...</span>
                </li>
                
                <!-- 常规页码 -->
                <li class="page-item" *ngIf="page > 0" [class.active]="list.page === page">
                  <a class="page-link" href="javascript:;" (click)="goToPage(page)">{{ page }}</a>
                </li>
              </ng-container>
              
              <!-- 下一页 -->
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              
              <!-- 尾页 -->
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(maxPageCount)">
                  <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 新建/编辑商品模态框 -->
<ng-template #createEditModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title">{{ isEditMode ? '编辑商品' : '新建商品' }}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
  </div>
  <div class="modal-body">
    <form [formGroup]="createShopForm" (ngSubmit)="save()">
      <!-- 基本信息 -->
      <div class="mb-4">
        <h5 class="border-bottom pb-2">基本信息</h5>
        <div class="row">
          <div class="col-md-6 mb-3" *ngIf="isEditMode">
            <label class="form-label">商品ID</label>
            <input type="text" class="form-control" formControlName="id" [readOnly]="true">
          </div>
          
          <div class="col-md-6 mb-3">
            <label class="form-label">商品名称 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" formControlName="productName">
            <div *ngIf="createShopForm.get('productName')?.touched && createShopForm.get('productName')?.invalid" class="invalid-feedback d-block">
              商品名称是必填项
            </div>
          </div>
          
          <div class="col-md-6 mb-3">
            <label class="form-label">英文名称</label>
            <input type="text" class="form-control" formControlName="englishName">
          </div>
          
          <div class="col-md-6 mb-3">
            <label class="form-label">日文名称</label>
            <input type="text" class="form-control" formControlName="japaneseName">
          </div>
          
          <div class="col-md-6 mb-3">
            <label class="form-label">SKU</label>
            <input type="text" class="form-control" formControlName="sku">
          </div>
          
          <div class="col-md-6 mb-3">
            <label class="form-label">条码</label>
            <input type="text" class="form-control" formControlName="barcode">
          </div>
        </div>
      </div>
      
      <!-- 分类信息 -->
      <div class="mb-4">
        <h5 class="border-bottom pb-2">分类信息</h5>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label class="form-label">货主代码</label>
            <input type="text" class="form-control" formControlName="ownerCode">
          </div>
          
          <div class="col-md-6 mb-3">
            <label class="form-label">客户商品代码</label>
            <input type="text" class="form-control" formControlName="customerProductCode">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">商品分类</label>
            <select class="form-select" formControlName="category">
              <option value="">请选择</option>
              <option *ngFor="let cat of categoryOptions" [value]="cat">{{cat}}</option>
            </select>
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">商品类型</label>
            <select class="form-select" formControlName="productType">
              <option value="">请选择</option>
              <option *ngFor="let type of productTypeOptions" [value]="type">{{type}}</option>
            </select>
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">商品属性</label>
            <select class="form-select" formControlName="productAttribute">
              <option value="">请选择</option>
              <option *ngFor="let attr of productAttributeOptions" [value]="attr">{{attr}}</option>
            </select>
          </div>
        </div>
      </div>
      
      <!-- 规格信息 -->
      <div class="mb-4">
        <h5 class="border-bottom pb-2">规格信息</h5>
        <div class="row">
          <div class="col-md-12 mb-3">
            <label class="form-label">规格描述</label>
            <textarea class="form-control" formControlName="specification" rows="2"></textarea>
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">长度(cm)</label>
            <input type="number" class="form-control" formControlName="length">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">宽度(cm)</label>
            <input type="number" class="form-control" formControlName="width">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">高度(cm)</label>
            <input type="number" class="form-control" formControlName="height">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">体积(m³)</label>
            <input type="number" class="form-control" formControlName="volume">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">重量(kg)</label>
            <input type="number" class="form-control" formControlName="weight">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">单价(元)</label>
            <input type="number" class="form-control" formControlName="price">
          </div>
        </div>
      </div>
      
      <!-- 其他信息 -->
      <div class="mb-4">
        <h5 class="border-bottom pb-2">其他信息</h5>
        <div class="row">
          <div class="col-md-4 mb-3">
            <label class="form-label">基本单位</label>
            <select class="form-select" formControlName="splitUnit">
              <option value="">请选择</option>
              <option *ngFor="let unit of unitOptions" [value]="unit">{{unit}}</option>
            </select>
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">拆分控制</label>
            <select class="form-select" formControlName="splitControl">
              <option value="是">是</option>
              <option value="否">否</option>
            </select>
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">拆分数量</label>
            <input type="number" class="form-control" formControlName="splitQuantity">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">托盘层数</label>
            <input type="number" class="form-control" formControlName="trayLayerCount">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">托盘高度</label>
            <input type="number" class="form-control" formControlName="trayHeight">
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">保质期单位</label>
            <select class="form-select" formControlName="shelfLifeDaysUnit">
              <option value="">请选择</option>
              <option *ngFor="let unit of shelfLifeDaysUnitOptions" [value]="unit">{{unit}}</option>
            </select>
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">计费类型</label>
            <select class="form-select" formControlName="billingType">
              <option value="">请选择</option>
              <option *ngFor="let type of billingTypeOptions" [value]="type">{{type}}</option>
            </select>
          </div>
          
          <div class="col-md-4 mb-3">
            <label class="form-label">是否停用</label>
            <select class="form-select" formControlName="tingyong">
              <option [ngValue]="0">启用</option>
              <option [ngValue]="1">禁用</option>
            </select>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">取消</button>
    <button type="button" class="btn btn-primary" (click)="save()" [disabled]="isSaving">
      <i *ngIf="isSaving" class="fa fa-spinner fa-spin me-1"></i>
      {{ isEditMode ? '保存修改' : '创建商品' }}
    </button>
  </div>
</ng-template> 